<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="../static/plugin/layui/css/layui.css">
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="layui-fluid">
    <div class="layui-bg-white" style="height: 100px;padding: 0px;">
        <h1 style="text-align: center">11212312</h1>
        <span class="layui-breadcrumb" style="bottom:10px; left: 30px;">
          <a href="/index.html">首页</a>
          <a href="">国际新闻</a>
          <a href="">亚太地区</a>
          <a><cite>正文</cite></a>
        </span>
    </div>

    <hr class="layui-bg-gray">

    <!--查询框-->
    <blockquote class="layui-elem-quote">
        <form class="layui-form layui-form-item" style="margin-top: 30px">
            <div class="layui-inline">
                <label class="layui-form-label">账户名：</label>
                <div class="layui-input-inline" style="width: 150px;">
                    <input type="text" name="loginName" placeholder="请输入账户名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">账户状态：</label>
                <div class="layui-inline" style="width: 300px;">
                    <input type="radio" name="enable" value="" title="不限" checked>
                    <input type="radio" name="enable" value="true" title="启用">
                    <input type="radio" name="enable" value="false" title="禁用">
                </div>
            </div>
            <div class="layui-inline" style="float: right">
                <buton lay-submit class=" layui-btn layui-btn-radius layui-btn-normal" lay-filter="query"
                       style="width: 150px;">查询
                </buton>
                <buton lay-submit class=" layui-btn layui-btn-radius layui-btn-primary" lay-filter="reset"
                       style="width: 150px;">重置
                </buton>
            </div>
        </form>
    </blockquote>
    <!--查询框-->
    <div class="layui-btn-group layui-form">
        <button class="layui-btn" lay-submit lay-filter="add">新增</button>
        <button class="layui-btn" lay-submit lay-filter="edit">编辑</button>
        <button class="layui-btn" lay-submit lay-filter="delete">删除</button>
    </div>
    <!--数据表-->
    <table id="user" lay-filter="bar"></table>
    <!--数据表-->
</div>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="../static/plugin/layui/layui.js"></script>
<script src="../static/js/common.js"></script>
<script id="is_enable" type="text/html">
    <div>
        {{# if(d.enable === true){ }}
        <input type="checkbox" name="enable" lay-skin="switch" lay-text="启用|禁用" value="{{d.id}}" checked
               lay-filter="is_enable"/>
        {{# }else{ }}
        <input type="checkbox" name="enable" lay-skin="switch" lay-text="启用|禁用" value="{{d.id}}" lay-filter="is_enable"/>
        {{# } }}
    </div>
</script>
<script>
    layui.use(['layer', 'element', 'table', 'laypage', 'laytpl', 'util', 'form', 'jquery'], function () {
        var $ = layui.$;
        var layer = layui.layer;
        var element = layui.element;
        var table = layui.table;
        var laypage = layui.laypage;
        var util = layui.util;
        var laytpl = layui.laytpl;
        var form = layui.form;

        //添加修改弹窗index
        var insert_update_layer_index;

        //表格渲染
        table.render({
            elem: '#user',
            height: 'full-300',
            cols: [[
                {
                    checkbox: true
                },
                {
                    field: 'id',
                    title: 'id',
                    align: 'center'
                }, {
                    field: 'loginName',
                    title: '用户名',
                    align: 'center'
                }, {
                    field: 'departmentId',
                    title: '部门',
                    align: 'center'
                }, {
                    field: 'gmtLastLogin',
                    title: '最后登录时间',
                    align: 'center',
                    templet: function (d) {
                        return util.toDateString(d.gmtCreate, 'yyyy-MM-dd HH:mm:ss');
                    }
                }, {
                    fixed: 'right',
                    field: 'enable',
                    title: '账户状态',
                    width: 150,
                    align: 'center',
                    templet: '#is_enable'
                }
            ]],
            url: '/persional/users/page', //异步加载地址
            method: 'GET',                //请求方式
            page: {                       //是否开启分页
                limit: 10,                //每页个数
                limits: [10, 20, 50],     //可选每页个数
            },
            request: {
                pageName: 'current',     //页码的参数名称，默认：page
                limitName: 'size'        //每页数据量的参数名，默认：limit
            },
            response: {
                statusName: 'errcode',   //数据状态的字段名称，默认：code
                statusCode: 1,           //成功的状态码，默认：0
                msgName: 'errmsg',       //状态信息的字段名称，默认：msg
                countName: 'total',      //数据总数的字段名称，默认：count
                dataName: 'data'         //数据列表的字段名称，默认：data
            },
            loading: true,               //开启加载动画
            id: 'user',
        });

        //监听增加按钮
       form.on('submit(add)', function () {
           insert_update_layer_index = layer.open({
                type: 1,
                anim: 1,
                title: '新增',
                area: ['500px', '500px'],
                content: `<div class="layui-form" style="width: 450px; margin-top: 30px">
                               <div class="layui-form-item" >
                                <label class="layui-form-label">部门</label>
                                <div class="layui-input-block">
                                  <select name="department" lay-verify="required">
                                    <option value=""></option>
                                    <option value="0">总经办</option>
                                    <option value="1">人事</option>
                                    <option value="2">需求</option>
                                    <option value="3">研发</option>
                                    <option value="4">测试</option>
                                  </select>
                                </div>
                              </div>
                             <div class="layui-form-item" >
                                <label class="layui-form-label">用户名</label>
                                <div class="layui-input-block">
                                  <input type="text" name="loginName" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                                </div>
                              </div>
                              <div class="layui-form-item" >
                                <label class="layui-form-label">密码</label>
                                <div class="layui-input-block">
                                  <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                                </div>
                              </div>
                              <div class="layui-form-item" >
                                <label class="layui-form-label">密码确认</label>
                                <div class="layui-input-block">
                                  <input type="password" name="rePassword" required lay-verify="required" placeholder="请再次输入密码" autocomplete="off" class="layui-input">
                                </div>
                              </div>
                              <div class="layui-form-item" >
                                <label class="layui-form-label">角色</label>
                                <div class="layui-input-block">
                                  <input type="checkbox" name="role[admin]" title="系统管理员">
                                  <input type="checkbox" name="role[user]" title="普通用户" checked>
                                  <input type="checkbox" name="role[haha]" title="哈哈哈">
                                </div>
                              </div>
                              <div class="layui-form-item" >
                                <label class="layui-form-label">是否启用</label>
                                <div class="layui-input-block">
                                  <input type="checkbox" name="enable" lay-skin="switch" lay-text="启用|禁用">
                                </div>
                              </div>
                              <div class="layui-form-item" >
                                <div class="layui-input-block">
                                  <button class="layui-btn" lay-submit lay-filter="formData">立即提交</button>
                                  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                              </div>
                            </div>`,

                 success: function(layero, index){
                    form.render();
                 }
            });
        })
        //开关事件监听
        form.on('switch(is_enable)', function (data) {
            var id = data.value;
            var enable = data.elem.checked;
            var user = {
                "id": id,
                "enable": enable
            };
            $.ajax({
                url: '/persional/users/update',
                type: 'PUT',
                data: JSON.stringify(user),
                success: function (res) {
                    if (res.errcode) {
                        layer.msg('操作成功', {icon: 1});
                    } else {
                        layer.msg('操作失败', {icon: 2});
                    }
                },
                error: function (data) {
                    layer.msg('网络错误', {icon: 6});
                }
            })
        });

        //查询按钮事件监听
        form.on('submit(query)', function (data) {
            console.log(data.field);
            table.reload('user', {
                url: '/persional/users/page',
                where: {
                    loginName: data.field.loginName,
                    enable: data.field.enable
                }
            });
        });

        //重置按钮事件监听
        form.on('submit(reset)', function (data) {
            table.reload('user', {
                url: '/persional/users/page',
                where: {
                    loginName: null,
                    enable: null
                }
            });
        });

        //添加修改事件响应
        form.on('submit(formData)',function (data) {
            console.log(insert_update_layer_index);
            layer.close(insert_update_layer_index);

        })
    });
</script>
</body>
</html>